<template>
  <div class="huabu">
    <canvas id="tutorial" ref="tutorialRef" width="900" height="900"></canvas>
  </div>
</template>

<script lang="ts">
import { Vue, Options } from 'vue-property-decorator';
@Options({ components: {

} })
export default class HuaBu extends Vue {
  public ctx: CanvasRenderingContext2D |null = null;

  public draw() {
    // this.drawRectangle();
    // this.drawTriangle();
    // this.drawSmile();
    // this.drawTriangle2();
    // this.drawDialog();
    // this.drawPath2D();
    // this.drawSquare();
    // this.drawCircle();
    // this.drawGrad();
    // this.drawClip();
    // this.drawImg();

    //    for(var i = 0; i < 4; i++){
    //   for(var j = 0; j < 3; j++){
    //     ctx.beginPath();
    //     var x = 25 + j * 50; // x 坐标值
    //     var y = 25 + i * 50; // y 坐标值
    //     var radius = 20; // 圆弧半径
    //     var startAngle = 0; // 开始点
    //     var endAngle = Math.PI + (Math.PI * j) / 2; // 结束点
    //     var anticlockwise = i % 2 == 0 ? false : true; // 顺时针或逆时针

    //     ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);

    //     if (i>1){
    //       ctx.fill();
    //     } else {
    //       ctx.stroke();
    //     }
    //   }
    // }
  // }
  }
 
  public drawSmile() {
    this.ctx!.beginPath();
    this.ctx!.arc(200, 200, 50, 0, Math.PI * 2, true); // 绘制
    // arc(x, y, radius, startAngle, endAngle, anticlockwise)
    // 画一个以（x,y）为圆心的以radius为半径的圆弧（圆），从startAngle开始到endAngle结束，按照anticlockwise给定的方向（默认为顺时针）来生成。
    // arc()函数中表示角的单位是弧度，不是角度。
    // anticlockwise为一个布尔值。为true时，是逆时针方向，否则顺时针方向
    this.ctx!.moveTo(235, 200);
    this.ctx!.arc(200, 200, 35, 0, Math.PI, false);   // 口(顺时针)
    this.ctx!.moveTo(185, 185);
    this.ctx!.arc(180, 180, 5, 0, Math.PI * 2, true);  // 左眼
    this.ctx!.moveTo(95, 65);
    this.ctx!.arc(90, 65, 5, 0, Math.PI * 2, true);  // 右眼
    this.ctx!.stroke();
  }
   public drawTriangle() {
    this.ctx!.beginPath();
    this.ctx!.moveTo(100, 50);//通常会使用moveTo()函数设置起点
    this.ctx!.lineTo(150, 75);//绘制一条从当前位置到指定x以及y位置的直线。
    this.ctx!.lineTo(150, 25)
    this.ctx!.fill();
    // 当你调用fill()函数时，所有没有闭合的形状都会自动闭合，所以你不需要调用closePath()函数。但是调用stroke()时不会自动闭合。
  }
   public drawRectangle() {
    this.ctx!.fillStyle = 'rgb(200,0,0)';
    this.ctx!.fillRect(10, 10, 55, 50);

    this.ctx!.fillStyle = 'rgba(0, 0, 200, 0.5)';
    this.ctx!.strokeRect(30, 30, 55, 50);
    this.ctx!.clearRect(30, 30, 55, 50);//清除指定矩形区域，让清除部分完全透明。

    // this.ctx!.fillRect(25, 25, 100, 100);
    // this.ctx!.clearRect(45, 45, 60, 60);
    // this.ctx!.strokeRect(50, 50, 50, 50);
  }
  public drawImg() {
    const img = new Image();
    img.src = 'https://mdn.mozillademos.org/files/5395/backdrop.png';
    img.onload = () => {
      this.drawLineChart(img, 0, 0);
    };
    // 使用图片
    // this.drawLine(img, 0, 0);
  }
  public drawLineChart(img: HTMLImageElement, x: number, y: number) {
    this.ctx!.drawImage(img, x, y);
    this.ctx!.beginPath();
    this.ctx!.moveTo(30, 96);
    this.ctx!.lineTo(70, 66);
    this.ctx!.lineTo(103, 76);
    this.ctx!.lineTo(170, 15);
    this.ctx!.stroke();
  }
  public drawClip() {
    this.ctx!.arc(100, 100, 75, 0, Math.PI * 2, false);
    this.ctx!.clip();
    this.ctx!.fillRect(0, 0, 100, 100);
    // this.ctx!.stroke();
    // this.ctx!.fill();
  }
  public drawGrad() {
    // 渐变
    const radgrad = this.ctx!.createRadialGradient(45, 45, 10, 52, 50, 30);
    radgrad.addColorStop(0, '#A7D30C');
    radgrad.addColorStop(0.9, '#019F62');
    radgrad.addColorStop(1, 'rgba(1,159,98,0)');
    this.ctx!.fillStyle = radgrad;
    this.ctx!.fillRect(0, 0, 150, 150);
  }
  public drawCircle() {
    for (let i = 0;i < 6;i++) {
      for (let j = 0;j < 6;j++) {
        this.ctx!.strokeStyle = `rgb(0,${Math.floor(255 - 42.5 * i)},${
          Math.floor(255 - 42.5 * j)})`;
        this.ctx!.beginPath();
        this.ctx!.arc(12.5 + j * 25, 12.5 + i * 25, 10, 0, Math.PI * 2, true);
        this.ctx!.stroke();
      }
    }
  }
  public drawSquare() {
    for (let i = 0;i < 6;i++) {
      for (let j = 0;j < 6;j++) {
        this.ctx!.fillStyle = `rgb(${Math.floor(255 - 42.5 * i)},${
          Math.floor(255 - 42.5 * j)},0)`;
        this.ctx!.fillRect(j * 25, i * 25, 25, 25);
      }
    }
  }
  public drawTriangle2() {
    // 填充三角形
    this.ctx!.beginPath();
    this.ctx!.moveTo(25, 25);
    this.ctx!.lineTo(105, 25);
    this.ctx!.lineTo(25, 105);
    this.ctx!.fill();

    this.ctx!.beginPath();
    this.ctx!.moveTo(125, 125);
    this.ctx!.lineTo(125, 45);
    this.ctx!.lineTo(45, 125);
    this.ctx!.closePath();
    // 正如上面所提到的，因为路径使用填充（fill）时，路径自动闭合，使用描边（stroke）则不会闭合路径。如果没有添加闭合路径closePath()到描边三角形函数中，则只绘制了两条线段，并不是一个完整的三角形。
    this.ctx!.stroke();
  }
  public drawDialog() {
    this.ctx!.beginPath();
    this.ctx!.moveTo(75, 25);
    this.ctx!.quadraticCurveTo(25, 25, 25, 62.5);
    this.ctx!.quadraticCurveTo(25, 100, 50, 100);
    this.ctx!.quadraticCurveTo(50, 120, 30, 125);
    this.ctx!.quadraticCurveTo(60, 120, 65, 100);
    this.ctx!.quadraticCurveTo(125, 100, 125, 62.5);
    this.ctx!.quadraticCurveTo(125, 25, 75, 25);
    this.ctx!.stroke();
  }
  public drawPath2D() {
    // Path2D() 构造函数返回一个新的 Path2D 对象的实例
    // path 可选  当调用另一个 Path2D 对象时，会创建一个 path 变量的拷贝。
    const rectangle = new Path2D();
    rectangle.rect(10, 10, 50, 50);
    this.ctx!.stroke(rectangle);

    const circle = new Path2D(rectangle);
    circle.moveTo(125, 35);
    circle.arc(100, 35, 25, 0, 2 * Math.PI);
    this.ctx!.fill(circle);
  }
  public mounted() {
    const canvas = this.$refs.tutorialRef as HTMLCanvasElement;
    this.ctx = canvas.getContext('2d');
    console.log(this.ctx);
    this.draw();
  }
};
</script>

<style lang="postcss">
.huabu{
  position: relative;
  width: 100%;
  height: 100%;
  #tutorial{
    position: absolute;
    left: 0;
    top: 0;
    background-color: #fff;
  }
  #stockGraph{
    position: absolute;
    right: 0;
    top: 0;
    background-color: #fff;
  }
  #clock{
    position: absolute;
    left: 0;
    bottom: 0;
    background-color: #fff;
  }
}

</style>
